<template>
	<base-page>
		<view slot="header">
			<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">投诉和建议</block></cu-custom>
		</view>
		<view slot="center" class="prl-40">
			<view class="complaint-title">投诉和建议</view>
			<view class="top-text"><textarea placeholder-style="color:#999999" placeholder="请填写你的问题或建议，感谢你的支持～" /></view>
			<!-- <view class="complaint-title">图片（提供问题截图，选填）</view>
			<view class="top-text">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 9"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view> -->
			<view class="complaint-title">联系方式</view>
			<view class="top-text"><input class="uni-input" placeholder="留下联系方式，更可能解决问题～" /></view>
		</view>
		<view slot="below" class="prl-40"><button class="cu-btn round bg-orange-red shadow margin-tb" style="width: 100%;" @click="complaintBtn">提交</button></view>
	</base-page>
</template>

<script>
export default {
	data() {
		return {
			imgList: []
		};
	},
	onLoad(e) {},
	onShow(e) {},
	methods: {
		DelImg(e) {
			uni.showModal({
				title: '召唤师',
				content: '确定要删除这段回忆吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		ChooseImage() {
			this.$Utils.upImg().then(res => {
				// console.log('log', res);
				this.imgList.push(res.data.pic_path);
			});
		},
		complaintBtn() {
			this.$Utils.tip('提交成功');
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.prl-40 {
	padding: 0 40rpx;
}
.complaint-title {
	margin: 20rpx 0;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #101010;
}
.top-text {
	width: 100%;
	padding: 20rpx;
	border: 1px solid #ffffff;
	box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.06);
	border-radius: 16rpx;
}
</style>
